
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <script>
    </script>
</head>
<style>
    html,
    body {
        font-size: 15px;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        background-color: #f2f2f2;
        overflow: hidden;
    }

    #app {
        width: 100%;
        height: 100%;
    }

    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    img {
        -webkit-user-select: none;
    }

    footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* height: 75px; */
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 0 30px;
        padding-top: 10px;
        box-sizing: border-box;
        background-color: #ffffff;
    }

    .footer-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .footer-btn img {
        width: 20px;
        height: 20px;
        margin-bottom: 5px;
    }

    .device {
        height: 488.6px;
        width: 235.2px;
        margin: 0 auto;
        border-radius: 15.4px;
        position: absolute;
        top: 48%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .device-frame {
        border-radius: 28px;
        height: 488.6px;
        padding: 57.4px 12.6px;
        width: 235.2px;
        box-sizing: border-box;
        z-index: 999;
    }

    .shell-frame {
        /* border: 1px solid #000000; */
        /* box-shadow: inset 0 0 0 2px #c8cacb, inset 0 0 0 6px #e2e3e4;         */
        /* background: #363636; */
        /* box-shadow: inset 0 0 9px 8px rgba(130, 130, 130, 0), inset 0 0 10px 11px rgba(90, 90, 90, 0.42);
        border-radius: 28px; */
        height: 474.6px;
        /* padding: 82px 18px; */
        width: 233.7px;
        box-sizing: border-box;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 999;
        overflow: hidden;
    }
    /* .left-btn{
        background: #FFFFFF;
        border-radius: 2px 10px 10px 2px / 0px 14px 14px 0px;
        height: 70px;

        z-index: 9;
    } */

    .btn {
        content: "";
        height: 28px;
        width: 4px;
        border-top: 1px solid #333333;
        border-bottom: 1px solid #333333;
        border-radius: 2px 2px 2px 2px/0px 4px 4px 0px;
        box-shadow: inset 0 0 1px 1px #adb0b3;
    }

    .left-btn {
        position: absolute;
        left: -5px;
        top: 91px;
        z-index: 999;
        background-color: #fff;
    }

    .left-btn .btn {
        margin: 6.3px 0;
        border-radius: 2px 2px 2px 2px/4px 0px 0px 4px;
    }

    .left-btn::after {
        content: '';
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        height: 42px;
        width: 5px;
        border-radius: 0px 10px 10px 0px/0px 10px 10px 0px;
        box-shadow: inset -11px 0px 13px 0px #adb0b3, 7px 0px 6px 1px rgba(90, 90, 90, 0.45);
    }

    .right-btn {
        position: absolute;
        right: -5px;
        top: 91px;
        z-index: 9999;
        background: #fff;
    }

    .right-btn .btn {
        margin: 14px 0;
        box-shadow: inset 0 0 1px 1px #adb0b3, 0 0 0 1px #adb0b3;
    }

    .right-btn::before {
        content: '';
        position: absolute;
        left: -5px;
        top: 0;
        height: 143.5px;
        width: 5px;
        border-radius: 10px 0px 0px 10px/20px 0px 0px 20px;
        box-shadow: inset 11px 0px 13px 0px #adb0b3, -7px 0px 6px 1px rgba(90, 90, 90, 0.35);
    }

    .camera {
        position: absolute;
        z-index: 999;
    }
    /* .canvas img {
        max-width: 400px;
    } */

    .canvas {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .canvas img {
        position: absolute;
        left: 0;
        top: 0;
    }

    .width {
        width: 100%;
        height: 20px;
    }

    .container {
        position: relative;
        width: 100%;
        padding-bottom: 50px;
    }

    input {
        display: none;
    }

    .h_line {
        border-bottom: 1px dashed rgb(62, 139, 202);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200%;
        height: 1px;
        z-index: 9999999;
    }

    .v_line {
        border-right: 1px dashed rgb(62, 139, 202);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1px;
        height: 200%;
        z-index: 9999999;
    }

    .layer {
        width: 95%;
        background-color: #fff;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 70px;
        height: 50px;
        border-radius: 5px;
    }

    .bgImg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .add-btn {
        width: 50px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 99999;
    }

    .btn-img {
        width: 100%;
    }

    .add-label {
        width: 100%;
        height: 100%;
    }

    .submit {
        width: 50px;
        position: absolute;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        z-index: 99999;
    }

    .wx_btn {
        position: absolute;
        right: 20px;
        top: 20px;
    }

    [v-clock] {
        display: none;
    }

    .mask {
        height: 100%;
        width: 100%;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99999999;
    }

    .notice_mask{
        height: 100%;
        width: 100%;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 99999999;
    }

    .tips {
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        margin: 0 auto;
        padding: 20px;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, .7);
        width: 50%;
    }

    .dialog {
        background-color: #fff;
        font-size: 16px;
        color: #333333;
        text-align: center;
        margin: 0 auto;
        border-radius: 5px;
        width: 70%;
    }

    .dialog .text {
        padding: 30px;
    }

    .dialog_btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

    .dialog_btn span {
        width: 50%;
        text-align: center;
        padding: 10px;
    }

    .cancle {
        border-right: 1px solid rgba(0, 0, 0, 0.1);
    }

    .prew {
        position: absolute;
        top: 0;
        z-index: 9999999999;
        width: 100%;
    }

    .wx_tips{
        color: #999999;
        position: absolute;
        top:50%;
        right: 20px;
        transform: translateY(-50%);
        writing-mode: vertical-lr;
    }
</style>

<body>
<div id="app" v-clock>
    <div class="notice_mask" v-if="noticeflag" @click="closeNotice">
        <img src="./assets/notice.jpeg" style="width: 60%" alt="">
        <img src="./assets/close.png" alt="" style="width:50px;margin-top: 30px">
    </div>
    <div class="mask" v-if="loading">
        <div class="tips" v-show="!dialog">
            正在上传，请稍后。。
        </div>
        <div class="dialog" v-show="dialog">
            <div class="text">是否上传图片</div>
            <div class="dialog_btn">
                <span class="cancle" @click="loading=false">取消</span>
                <span @click="draw">好的</span>
            </div>
        </div>
    </div>
    <div @click="setOtherPhone" class="wx_btn">选择其他机型></div>
    <div class="wx_tips">双击替换图片</div>

    <div class="device">
        <div class="h_line" v-show="h_flag"></div>
        <div class="v_line" v-show="v_flag"></div>
        <div class="add-btn" v-show="subFlag">
            <input type='file' accept='image/png, image/jpeg, image/jpg, image/svg, image/gif' id='inputFile' @change="changeHandler"
                   ref="pic">
            <label for="inputFile" class="add-label">
                <img class="btn-img" src="./assets/icon_add@3x.png" alt="">
            </label>
        </div>
        <!-- <div class="device-frame"></div> -->
        <div class="shell-frame" :style="{height:phone_res.phoneH * K+'px',width:phone_res.phoneW * K+'px',borderRadius:phone_res.corner_radius * K+'px'}">
            <img :src="phone_res.bgImg" alt="" class="bgImg">
            <img :src="material_res.material_cover_mask" alt="" class="bgImg">
            <img :src="material_res.material_cover_img" alt="" class="bgImg">

            <div class="canvas" :style="{height:phone_res.phoneH * K+44.8+'px',width:phone_res.phoneW * K+44.8+'px'}">
                <img id="img" ref="img" :style="{height:imgArr.height+'px',width:imgArr.width+'px'}" v-finger:tap="tap" v-finger:multipoint-start="multipointStart"
                     v-finger:long-tap="longTap" v-finger:swipe="swipe" v-finger:pinch="pinch" v-finger:rotate="rotate" v-finger:press-move="pressMove.bind(this, 12)"
                     v-finger:multipoint-end="multipointEnd" v-finger:double-tap="doubleTap" v-finger:single-tap="singleTap"
                     v-finger:touch-start="touchStart" v-finger:touch-move="touchMove" v-finger:touch-end="touchEnd" v-finger:touch-cancel="touchCancel"
                     :src="imgArr.url" alt="">
            </div>
            <img v-for="item in phone_res.shapes" :src="item.url" alt="" class="camera" :style="{height:item.h*K+'px',width:item.w*K+'px',left:phone_res.phoneW/2*K+item.x*K-item.w/2*K+'px',top:phone_res.phoneH/2*K+item.y*K-item.h/2*K+'px'}">
        </div>
        <!-- <div class="camera">
        </div>
        <div class="left-btn">
            <div class="btn"></div>
        </div>
        <div class="right-btn">
            <div class="btn"></div>
            <div class="btn"></div>
            <div class="btn"></div>
        </div> -->
    </div>

    <!-- <canvas id="canvas" width="200px" height="200px"></canvas> -->

    <!-- <footer>
        <div class="footer-btn">
            <input type='file' accept='image/png, image/jpeg, image/jpg, image/svg, image/gif' id='inputFile' @change="changeHandler"
                ref="pic">
            <label for="inputFile" class="footer-btn">
                <img src="./common_icon_visitor@3x.png" alt="">
                <span>图片</span>
            </label>
        </div>
        <div class="footer-btn">
            <img src="./common_icon_visitor@3x.png" alt="">
            <span>贴纸</span>
        </div>
        <div class="footer-btn">
            <img src="./common_icon_visitor@3x.png" alt="">
            <span>图层</span>
        </div>
    </footer> -->

    <div class="submit" @click="subm" v-show="!subFlag">
        <img class="btn-img" src="./assets/icon_check@3x.png" alt="">
    </div>
</div>
</body>
<script src="//cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="./assets/alloy_finger.js"></script>
<script src="./assets/alloy_finger.vue.js"></script>
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<script src="./assets/canvas-to-blob.min.js"></script>
<script src="//cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script>
<script src="./assets/exif.js"></script>
<script src="./assets/transform.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

<script>
  // eruda.init();
  Vue.use(AlloyFingerVue);
  var h = new Vue({
    el: '#app',
    data: {
      index: null,
      noticeflag:false,
      initScale: 1,
      imgArr: {},
      angle: 0,
      imgIndex: null,
      fold: 4,
      h_flag: false,
      v_flag: false,
      imgObject: {
        angle: 0,
        l: 0,
        t: 0,
        scaleY: 1,
        scaleX: 1,
        url: '',
        width: 0,
        height: 0,
      },
      req: {},
      color_id: '1',
      material_id: '1',
      systype: 'xcxweb',
      appversion: '1.0',
      material_res: {},
      phone_res: {},
      K: 2.8,
      subFlag: true,
      Orientation: null,
      imgItem: null,
      loading: false,
      dialog: false,
    },
    created: function () {
      // this.getToken();
      this.getPhoneModelResource();
    },
    mounted: function () {
      var imgItem = document.getElementById('img');
      this.imgItem = imgItem;
      Transform(imgItem);
    },
    methods: {
      closeNotice:function(){
        this.noticeflag = false;
      },
      getPhoneModelResource: function () {
        var that = this;
        // this.req = this.GetRequest();
        // console.log(this.GetRequest());
        // $.ajax({
        //   url: 'https://api.ycase.cn/api/resources/getPhoneModelResource',
        //   type: 'POST',
        //   data: {
        //     color_id: that.color_id,
        //     phone_id: that.req.phone_id,
        //     material_id: that.material_id,
        //     appversion: that.appversion,
        //     systype: that.systype,
        //     user_id: that.req.user_id,
        //     token: that.req.token,
        //   },
        //   success: function (data) {
        //     console.log(data);
        //     if (data.status == 1) {
        //       that.material_res = data.data.material_res;
        //       that.phone_res = data.data.phone_res;
        //     }
        //   }
        // });
        let data = {
          material_res: {
            material_cover_img: "http://res-cdn.ycay.com/materialCoverImg/2017/07/31/kml5ab08vs15",
            material_cover_mask: "http://res-cdn.ycay.com/materialCoverMask/2017/07/31/9js2zwyrc0fi",
            canva_margin_w: 12,
            canva_margin_h: 6
          },
          phone_res: {
            phoneW: 67,
            phoneH: 138.1,
            shapes: [{
              x: -16.5,
              y: -60.8,
              w: 19.25,
              h: 9.75,
              url: "http://res-cdn.ycay.com/phoneShellPic/2017/08/22//0u9hj",
              shadow_url: "http://res-cdn.ycay.com/phoneShellShadowPic/qm6sq"
            }],
            bgImg: "http://res-cdn.ycay.com/phoneShellPic/2017/07/29//b4wyq",
            corner_radius: 9.25
          }
        }
        that.material_res = data.material_res;
        that.phone_res = data.phone_res;
      },
      GetRequest: function () {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
          var str = url.substr(1);
          strs = str.split("&");
          for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
          }
        }
        return theRequest;
      },
      tap: function () {
        console.log('onTap');
      },
      changeImg: function () {
        var file = this.$refs.pic;
        file.click();
      },
      getToken: function () {
        var that = this;
        $.ajax({
          url: 'https://api.ycase.cn/api/Qiniu/getQiniuToken',
          type: 'POST',
          data: {
            type: 2
          },
          success: function (data) {
            console.log(data);
            that.token = data.data.qnToken;
            that.key = data.data.key;
            that.baseurl = data.data.baseurl;

          }
        });
      },
      subm: function () {
        this.loading = true;
        this.dialog = true;
      },
      draw: function () {
        var that = this;
        this.dialog = false;
        var image = new Image();
        element = this.imgArr;
        image.src = element.url;
        image.onload = function () {
          var canvas = document.createElement("canvas");
          var ctx = canvas.getContext('2d');
          canvas.height = (that.phone_res.phoneH * that.K + 44.8) * that.fold;
          canvas.width = (that.phone_res.phoneW * that.K + 44.8) * that.fold;
          ctx.save();
          switch (that.Orientation) {
            case 6: //需要顺时针90度旋转
              ctx.translate((element.l + element.width / 2) * that.fold, (element.t +
                element
                  .height / 2) * that.fold);
              ctx.rotate((element.angle + 90) * Math.PI / 180);
              ctx.translate(-(element.l + element.width / 2) * that.fold, -(element.t +
                element.height / 2) * that.fold);
              break;
            case 8: //需要逆时针90度旋转
              ctx.translate((element.l + element.height / 2) * that.fold, (element.t +
                element
                  .width / 2) * that.fold);
              ctx.rotate((element.angle - 90) * Math.PI / 180);
              ctx.translate(-(element.l + element.height / 2) * that.fold, -(element.t +
                element.width / 2) * that.fold);
              break;
            case 3: //需要180度旋转
              ctx.translate((element.l + element.width / 2) * that.fold, (element.t +
                element
                  .height / 2) * that.fold);
              ctx.rotate((element.angle + 180) * Math.PI / 180);
              ctx.translate(-(element.l + element.width / 2) * that.fold, -(element.t +
                element.height / 2) * that.fold);
              break;
            default:
              ctx.translate((element.l + element.width / 2) * that.fold, (element.t +
                element
                  .height / 2) * that.fold);
              ctx.rotate(element.angle * Math.PI / 180);
              ctx.translate(-(element.l + element.width / 2) * that.fold, -(element.t +
                element.height / 2) * that.fold);
          }


          switch (that.Orientation) {
            case 6: //需要顺时针90度旋转
              var realHeight = element.width * that.fold * element.scaleX;
              var realWidth = element.height * that.fold * element.scaleX;
              var offsetH = (realHeight / that.fold - element.height) / 2;
              var offsetW = (realWidth / that.fold - element.width) / 2;
              var realL = (element.l - offsetW) * that.fold;
              var realT = (element.t - offsetH) * that.fold;
              console.log(element.height);
              console.log(element.width);
              break;
            case 8: //需要逆时针90度旋转
              var realWidth = element.height * that.fold * element.scaleX;
              var realHeight = element.width * that.fold * element.scaleX;
              var offsetH = (realHeight / that.fold - element.width) / 2;
              var offsetW = (realWidth / that.fold - element.height) / 2;
              var realL = (element.l - offsetW) * that.fold;
              var realT = (element.t - offsetH) * that.fold;
              break;
            default:
              var realHeight = element.height * that.fold * element.scaleX;
              var realWidth = element.width * that.fold * element.scaleX;
              var offsetH = (realHeight / that.fold - element.height) / 2;
              var offsetW = (realWidth / that.fold - element.width) / 2;
              var realL = (element.l - offsetW) * that.fold;
              var realT = (element.t - offsetH) * that.fold;
              console.log(realL);
              console.log(realT);
          }

          console.log(realWidth);
          console.log(realHeight);

          ctx.drawImage(image, realL, realT, realWidth, realHeight);
          ctx.restore();
          var _image = new Image();
          _image.src = canvas.toDataURL("image/png");
          console.log(_image.src)
          // _image.setAttribute("class", "prew");
          // _image.onload = function () {
          //     document.body.appendChild(_image);
          // }

          if (canvas.toBlob) {
            canvas.toBlob(
              function (blob) {
                var formData = new FormData();
                formData.append('key', that.key);
                formData.append('token', that.token);
                formData.append('file', blob, 'canvas');
                console.log(blob);
                // $.ajax({
                //   url: 'https://upload-z2.qiniup.com',
                //   type: 'POST',
                //   data: formData,
                //   cache: false,
                //   processData: false,
                //   contentType: false,
                //   success: function (data) {
                //     url = that.baseurl + data.key;
                //     console.log(url);
                //     that.createOrder(url);
                //   }
                // });
              },
              'image/png'
            );
          }
        };
      },

      changeHandler: function (e) {
        var that = this;
        var file = this.$refs.pic;
        console.log(file);
        if (file.files[0] == null) {
          return
        }
        var Orientation = null;
        EXIF.getData(file.files[0], function () {
          EXIF.getAllTags(this);
          Orientation = EXIF.getTag(this, 'Orientation');
          console.log(Orientation);
          that.Orientation = Orientation;
        });
        str = JSON.stringify(this.imgObject), //系列化对象
          newobj = JSON.parse(str); //还原
        newobj.url = this.createObjectURL(file.files[0]);
        if (newobj.url != '') {
          this.subFlag = false;
        }
        var img = new Image();
        img.onload = function () {
          var width = 0;
          var height = 0;
          switch (that.Orientation) {
            case 6: //需要顺时针90度旋转
              width = img.naturalHeight;
              height = img.naturalWidth;
              break;
            case 8: //需要逆时针90度旋转
              width = img.naturalHeight;
              height = img.naturalWidth;
              break;
            default:
              width = img.naturalWidth;
              height = img.naturalHeight;
          }
          console.log('natureHeight  ' + height);
          console.log('natureWidth  ' + width);
          if (width < 300) {
            newobj.width = width;
            newobj.height = height;
          } else {
            newobj.width = 300;
            newobj.height = 300 * height / width;
          }
          console.log('Height  ' + newobj.height);
          console.log('Width  ' + newobj.width);
          that.imgArr = newobj;
        };
        img.src = newobj.url;
      },
      createOrder: function (contents_url) {
        var that = this;
        var contents_width = this.phone_res.phoneW * this.K * this.fold;
        // $.ajax({
        //   url: 'https://api.ycase.cn/api/Works/addWorks',
        //   type: 'POST',
        //   data: {
        //     user_id: that.req.user_id,
        //     token: that.req.token,
        //     contents_url: contents_url,
        //     contents_width: contents_width,
        //     color_id: that.color_id,
        //     material_id: that.material_id,
        //     systype: that.systype,
        //     appversion: that.appversion,
        //     phone_id: that.req.phone_id,
        //     phone_name: that.req.phone_name,
        //   },
        //   success: function (data) {
        //     console.log(data);
        //     if (data.status == 1) {
        //       var works_id = data.data.works_id;
        //       wx.miniProgram.redirectTo({
        //         url: '../createorder/createorder?works_id=' + works_id
        //       })
        //     } else {
        //       alert(data.info);
        //     }
        //   }
        // });
      },
      setOtherPhone: function () {
        wx.miniProgram.redirectTo({
          url: '../phoneOption/phoneOption?act=re'
        })
      },
      createObjectURL: function (file) {
        if (window.URL) {
          return window.URL.createObjectURL(file);
        } else {
          return window.webkitURL.createObjectURL(file);
        }
      },
      multipointStart: function (evt) {
        this.initScale = this.imgItem.scaleX;
        console.log('initScale' + this.initScale);
      },
      longTap: function () {
        console.log('onLongTap');
      },
      swipe: function (evt) {
        console.log("swipe" + evt.direction);
        console.log('onSwipe');
      },
      pinch: function (evt) {
        evt.preventDefault();
        this.imgArr.scaleX = this.imgArr.scaleX = this.initScale * evt.zoom;
        this.imgItem.scaleX = this.imgItem.scaleY = this.initScale * evt.zoom;
      },
      rotate: function (evt) {
        var realAngle = this.imgArr.angle;
        this.angle = realAngle;
        if (this.imgArr.angle % 90 == 0) {
          if (evt.angle > 2) {
            this.imgArr.angle += 10;
          } else if (evt.angle < -2) {
            this.imgArr.angle -= 10;
          }
        } else {
          if (evt.angle > 0) {
            if (realAngle > -10 && realAngle < 0) {
              this.imgArr.angle = 0;
            } else if (realAngle > 80 && realAngle < 90) {
              this.imgArr.angle = 90;
            } else if (realAngle > 170 && realAngle < 180) {
              this.imgArr.angle = 180;
            } else if (realAngle > 260 && realAngle < 270) {
              this.imgArr.angle = 270;
            } else if (realAngle > 350 && realAngle < 360) {
              this.imgArr.angle = 0;
            } else if (realAngle > -100 && realAngle < -90) {
              this.imgArr.angle = -90;
            } else if (realAngle > -190 && realAngle < -180) {
              this.imgArr.angle = -180;
            } else if (realAngle > -280 && realAngle < -270) {
              this.imgArr.angle = -270;
            } else {
              this.imgArr.angle += evt.angle;
            }
          } else if (evt.angle < 0) {
            if (realAngle > 0 && realAngle < 10) {
              this.imgArr.angle = 0;
            } else if (realAngle > -90 && realAngle < -80) {
              this.imgArr.angle = -90;
            } else if (realAngle > -180 && realAngle < -170) {
              this.imgArr.angle = -180;
            } else if (realAngle > -270 && realAngle < -260) {
              this.imgArr.angle = -270;
            } else if (realAngle > -360 && realAngle < -350) {
              this.imgArr.angle = 0;
            } else if (realAngle > 180 && realAngle < 190) {
              this.imgArr.angle = 180;
            } else if (realAngle > 90 && realAngle < 100) {
              this.imgArr.angle = 90;
            } else if (realAngle > 0 && realAngle < 10) {
              this.imgArr.angle = 0;
            } else {
              this.imgArr.angle += evt.angle;
            }
          } else {

          }
        }
        evt.preventDefault();
        this.imgItem.rotateZ = this.imgArr.angle;
        // console.log(this.imgItem.rotateZ);
      },
      pressMove: function (num, evt) {
        var mainX = (this.phone_res.phoneW * this.K + 44.8) / 2 - this.imgArr.width / 2;
        var mainY = (this.phone_res.phoneH * this.K + 44.8) / 2 - this.imgArr.height / 2;
        // console.log(mainY - tempArr[tempIndex].t);

        if (this.imgArr.t == mainY) {
          this.h_flag = true;
          if (evt.deltaY > 5) {
            this.imgArr.t += 10
          } else if (evt.deltaY < -5) {
            this.imgArr.t -= 10
          } else {

          }
        } else {
          this.h_flag = false;
          if (evt.deltaY > 0) {
            if (mainY - this.imgArr.t < 10 && mainY - this.imgArr.t > 0) {
              this.imgArr.t = mainY;
            } else {
              this.imgArr.t += evt.deltaY;
            }
          } else if (evt.deltaY < 0) {
            if (mainY - this.imgArr.t < 0 && mainY - this.imgArr.t > -10) {
              this.imgArr.t = mainY;
            } else {
              this.imgArr.t += evt.deltaY;
            }
          }
        }


        if (this.imgArr.l == mainX) {
          this.v_flag = true;
          if (evt.deltaX > 5) {
            this.imgArr.l += 10
          } else if (evt.deltaX < -5) {
            this.imgArr.l -= 10
          } else {

          }
        } else {
          this.v_flag = false;
          if (evt.deltaX > 0) {
            if (mainX - this.imgArr.l < 10 && mainX - this.imgArr.l > 0) {
              this.imgArr.l = mainX;
            } else {
              this.imgArr.l += evt.deltaX;
            }
          } else if (evt.deltaX < 0) {
            if (mainX - this.imgArr.l < 0 && mainX - this.imgArr.l > -10) {
              this.imgArr.l = mainX;
            } else {
              this.imgArr.l += evt.deltaX;
            }
          }
        }
        this.imgItem.translateY = this.imgArr.t;
        this.imgItem.translateX = this.imgArr.l;
        console.log(this.imgArr.l + ',' + this.imgArr.t);
        // console.log(this.imgArr);

        evt.preventDefault();
      },
      multipointEnd: function () {
        console.log('onMultipointEnd');
      },
      doubleTap: function () {
        console.log('onDoubleTap');
        this.changeImg();
      },
      singleTap: function () {
        console.log('onSingleTap');
      },
      touchStart: function (evt) {
        console.log('onTouchStart');
      },
      touchMove: function (evt) {
        // console.log(evt);
        evt.preventDefault();
      },
      touchEnd: function (evt) {
        // console.log(evt);
        this.v_flag = false;
        this.h_flag = false;
        evt.preventDefault();
      },
      touchCancel: function () {
        console.log('onTouchCancel');
      }
    }
  });
</script>

</html>